<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2024-01-05 10:17:42
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-09 14:07:17
-->
<template>
  <van-tabbar v-model="active">
    <van-tabbar-item to="my">
      活动
      <template #icon="props">
        <img :src="props.active ? getAssets('footer/common-sel.svg') : getAssets('footer/common.svg')" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="report">
      报表
      <template #icon="props">
        <img :src="props.active ? getAssets('footer/my-sel.svg') : getAssets('footer/my.svg')" />
      </template>
    </van-tabbar-item>
  </van-tabbar>

</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { Tabbar, TabbarItem } from "vant";

export default defineComponent({
  name: "common-footer",
  props: {
    my: {
      type: Boolean,
    },
    report: {
      type: Boolean,
    },
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  setup(props) {
    const state = reactive({
      active: 0,
    });
    onMounted(() => {
      if (props.my) {
        state.active = 0;
      }
      if (props.report) {
        state.active = 1;
      }
    });

    return { ...toRefs(state) };
  },
});
</script>
